<template>
    <div id="leafer-view">

    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted } from 'vue'
import { Leafer, Box, Text } from 'leafer-ui'
import { Flow } from '@leafer-in/flow'  // 导入自动布局插件 
import { Animate } from '@leafer-in/animate'
const btmBoxReturn = (x: number = 10, fill: string = '#6cb434') => {
    return new Box({
        x: x,
        height: 120,
        width: 10,
        fill: fill,
    })
}
const animateBox = (boxUpRight: Object, duration: number, flowRigthX: number, easing: any) => {
    new Animate(
        boxUpRight,
        { x: flowRigthX, cornerRadius: 0 }, // style keyframe
        {
            duration: duration,
            easing: easing,
            swing: true // 摇摆循环播放
        } // options
    )
}
onMounted(() => {
    const leafer = new Leafer({ view: 'leafer-view' })
    let flowListLeft = []
    let flowListRigth = []
    for (let i = 1; i <= 45; i++) {
        flowListLeft.push(new Box({
            fill: '#FF4B4B',
            height: 100,
            children: [{
                tag: 'Text', text: i, fill: 'white', width: 10,
                textAlign: 'center',
                verticalAlign: 'top', origin: 'center',
                rotation: 270,
                fontSize: 8,
                resizeFontSize:true,
            }]
        }))
    }
    for (let i = 46; i <= 90; i++) {
        flowListRigth.push(new Box({
            fill: '#FF4B4B',
            height: 100,
            children: [{
                tag: 'Text', text: i, fill: 'white', width: 10,
                textAlign: 'center',
                verticalAlign: 'top', origin: 'center',
                rotation: 270,
                fontSize: 8,
            }]
        }))
    }
    const flowLeft = new Flow({
        children: flowListLeft,
        gap: 1,
    })
    const flowRight = flowLeft.clone({ children: flowListRigth })
    const centerFlow = new Flow({
        fill: '#1862ad',
        padding: [10, 50],
        y: 120,
        height: 120,
        gap: 50,
        children: [flowLeft, flowRight],
    })
    const boxUpLeft = new Box({
        fill: '#009451',
        x: 50,
        height: 120,
        width: 85,
        opacity: 0.8,
        children: [{
            tag: 'Text',
            text: '5A',
            fill: 'white',
            width: 85,
            height: 120,
            textAlign: 'center',
            verticalAlign: 'middle',
        }]
    })
    let flowX = flowListRigth[flowListRigth.length - 1].getBounds()
    let flowLfX = flowListLeft[flowListLeft.length - 1].getBounds()
    let flowLeftX = flowLeft.getBounds()
    let flowRigthX = flowRight.getBounds()
    
    console.log(flowLeftX, flowRigthX, flowLfX, flowX,);
    const boxUpRight = boxUpLeft.clone({
        x: flowX.x - 85 + 10, children: [{
            tag: 'Text',
            text: '5B',
            fill: 'white',
            width: 85,
            height: 120,
            textAlign: 'center',
            verticalAlign: 'middle',
        }]
    })
    const topBoxUp = new Box({
        zIndex: 10,
        children: [boxUpLeft, boxUpRight],
        // , boxUpRight
    })
    const textBoxBtm = (text: string) => {
        return new Text({
            tag: 'Text',
            text: text,
            fill: '#000',
            height: 30,
            width: 30,
            textAlign: 'center',
            verticalAlign: 'middle',
        })
    }
    const boxBtmOne = new Box({
        fill: '#b29e4c',
        x: 10,
        y: 25 - 15,
        cornerRadius: 30,
        height: 30,
        width: 30,
        children: [textBoxBtm('1')]
    })
    const boxBtmOneCopy = boxBtmOne.clone()
    const boxBtmTwo = boxBtmOne.clone({
        x: 140 - 30,
        y: 25 - 15, children: [textBoxBtm('2')]
    })
    const boxBtmTwoCopy = boxBtmTwo.clone()
    const boxBtmLeft = new Box({
        fill: '#fea401',
        x: 50 + (85 / 2),
        y: (120 / 2) - 25,

        height: 50,
        width: 150,
        children: [boxBtmOne, {
            tag: 'Text',
            text: '5Asss',
            fill: '#000',
            width: 150,
            height: 50,
            textAlign: 'center',
            verticalAlign: 'middle',
        }, boxBtmTwo]
    })
    const boxBtmRigth = new Box({
        fill: '#fea401',
        x: boxUpRight?.x,
        y: (boxUpRight?.height / 2) - 25,
        height: 50,
        width: 150,
        children: [boxBtmOneCopy, {
            tag: 'Text',
            text: '5Bsss',
            fill: '#000',
            width: 150,
            height: 50,
            textAlign: 'center',
            verticalAlign: 'middle',
        }, boxBtmTwoCopy]
    })
    const topBoxBottom = new Box({
        zIndex: 1,
        children: [boxBtmLeft, boxBtmRigth],
    })

    const topBox = new Box({
        children: [topBoxUp, topBoxBottom],
    })
    const btmBoxRect = new Box({

        height: 120,
        width: 95,
        fill: '#fcd703',
        draggable: true,
    })
    const btmBoxRectCopy = btmBoxRect.clone()
    const btmBoxLeft = new Box({
        // fill: '#fcd703',
        y: 240,
        x: 50,
        height: 120,
        width: 95,
        children: [btmBoxRect, {
            tag: 'Text',
            text: '推焦车A',
            fill: '#000',
            width: 95,
            height: 120,
            textAlign: 'center',
            padding: [20, 0],
        }, btmBoxReturn(), btmBoxReturn(75, '#82cdea')],
    })
    const btmBoxRight = new Box({
        // fill: '#fcd703',
        y: 240,
        x: flowX.x - 85,
        height: 120,
        width: 95,
        children: [btmBoxRectCopy, {
            tag: 'Text',
            text: '推焦车B',
            fill: '#000',
            width: 95,
            height: 120,
            textAlign: 'center',
            padding: [20, 0],
        }, btmBoxReturn(), btmBoxReturn(75, '#82cdea')],
    })
    const btmBox = new Box({
        children: [btmBoxLeft, btmBoxRight],
    })
    const boxFlow = new Box({
        width: 600,
        height: 1800,
        x: 200,
        children: [topBox, centerFlow, btmBox],
    })
    nextTick(() => {
        animateBox(btmBoxLeft, 14, flowLfX.x, 'linear')
        animateBox(btmBoxRight, 7, flowRigthX.width, 'ease')
        animateBox(boxUpRight, 35, flowRigthX.width, 'ease')
        animateBox(boxBtmLeft, 42, flowLeftX.width, 'linear')
        // animateBox(btmBoxRight, 7, flowRigthX.width, 'ease')
    })

    // new Animate(
    //     btmBoxLeft,

    //     { x: flowLeftX.width, cornerRadius: 0 }, // style keyframe
    //     {
    //         duration: 14,
    //         easing: 'linear',
    //         swing: true // 摇摆循环播放
    //     } // options
    // )
    // new Animate(
    //     btmBoxRight,
    //     { x: flowRigthX.width, cornerRadius: 0 }, // style keyframe
    //     {
    //         duration: 7,
    //         easing: 'ease',
    //         swing: true // 摇摆循环播放
    //     } // options
    // )
    // new Animate(
    //     boxUpRight,
    //     { x: flowRigthX.width, cornerRadius: 0 }, // style keyframe
    //     {
    //         duration: 35,
    //         easing: 'ease',
    //         swing: true // 摇摆循环播放
    //     } // options
    // )
    leafer.add(boxFlow)
})
</script>
<style scoped lang="less">
#leafer-view {
    width: 100%;
    height: 40vh;
    margin-top: 3vh;
}
</style>